import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { DragHandle } from '@/components/TableDataBlock/SortBlock';
import { Button, Modal, Space, Form, Row, Col, Card, Checkbox } from 'antd';
const FiledModel = (props) => {
    const {
        visible = false,
        onClose,
        loading,
        handleCallback,
        dispatch
    } = props;
    const { show = false } = visible;
    const [checkedList, setCheckList] = useState([])
    const list = [
        {
            label: '姓名',
            value: 'username',
            disabled: true
        },
        {
            label: '客户当前阶段',
            value: 'stageInfo',

        },

        {
            label: '跟进人',
            value: 'stageAdminList',

        },
        {
            label: '入海总次数',
            value: 'publicAmount',

        },
        {
            label: '无效次数',
            value: 'totalInvalidAmount',

        },

        {
            label: '入海剩余时间',
            value: 'remainPublicDays',

        },
        {
            label: '学校',
            value: 'schoolName',

        },
        {
            label: '毕业年份',
            value: 'examYear',

        },
        {
            label: '性别',
            value: 'gender',

        },
        {
            label: '来源',
            value: 'channel',

        },

        {
            label: '手机',
            value: 'mobile',


        },
        {
            label: '轨迹',
            value: 'adminLog',


        },
        {
            label: '邀请人数',
            value: 'inviteUserAmount',
        },
        {
            label: '辅助手机号',
            value: 'otherMobiles',
        },
        {
            label: '是否锁定',
            value: 'lockFlag',
        },
        {
            label: '是否绑定抖音',
            value: 'bindDouyinFlag',

        },
        {
            label: '备案人',
            value: 'addAdminName',

        },
        {
            label: '备案时间',
            value: 'addTime',
        },
        {
            label: '用户标签',
            value: 'tags',
        },
        {
            label: '意向度',
            value: 'intention',

        },

        {
            label: '意向方向',
            value: 'intentionDirectionNames',


        },
        {
            label: '意向课程',
            value: 'intentionCoursesNames',
        },

        {
            label: '已购课程',
            value: 'buyFaceToFaceGoods',


        },
        {
            label: '最近跟进时间',

            value: 'lastFollowUpTime',
        },
        {
            label: '最近跟进人',
            value: 'lastFollowUpAdminName',
        },
        {
            label: '预计报名时间',
            value: 'expectedRegistrationDate',

        },
        {
            label: '当前状态',
            value: 'invalidStatus',

        },
    ]
    const fetchData = () => {
        dispatch({
            type: 'user/fetchAdminPageFieldConfig',
            payload: {
                pageFieldType: 'myUser',
            },
            callback: (e) => {
                const { pageFields } = e
                if (pageFields.length > 0) {
                    setCheckList(pageFields.split(','))
                }
                else {
                    setCheckList(list.map(item => {
                        return item.value
                    }))
                }

            },
        });
    }
    useEffect(() => {
        if (show) {
            fetchData()
        } else {

        }
    }, [show])
    const columns = [
        {
            title: ' ',
            dataIndex: 'dataname',
            render: (e) => {
                return <Space>
                    <DragHandle></DragHandle>
                    {e}
                </Space>
            }
        },
    ]

    const fakeExtens = () => {
        if (checkedList.length === 0) {
            onClose()
        } else {

            dispatch({
                type: 'user/fakeAdminPageFieldConfig',
                payload: {
                    pageFieldType: 'myUser',
                    pageFields: checkedList.toString()
                },
                callback: (e) => {
                    console.log(checkedList, 'checkedList=============31')
                    onClose()
                    handleCallback()
                },
            });
        }
    }
    const modalProps = {
        title: '自定义列表',
        width: 1200,
        visible: show,
        maskClosable: true,
        destroyOnClose: true,

        zIndex: 1010,
        confirmLoading: loading,
        footer: <Space>
            <Button onClick={() => onClose()}>取消</Button>
            <Button loading={loading} type='primary' onClick={() => fakeExtens()}>确定</Button>
        </Space>
    };

    return (
        <Modal {...modalProps} onCancel={onClose}>
            <Row gutter={[24, 24]}>
                <Col span={12}>
                    <Card extra={
                        <Checkbox onChange={(e) => {
                            if (e.target.checked) {
                                setCheckList(list.map(item => {
                                    return item.value
                                }))
                            }
                            else {
                                setCheckList(['username'])
                            }
                        }} checked={checkedList.toString() === list.map(item => {
                            return item.value
                        }).toString()}>全选</Checkbox>
                    } title='可选字段'>
                        <Checkbox.Group value={checkedList} onChange={(e) => {
                            setCheckList(e)
                        }}>
                            <Row gutter={[24, 24]}>
                                {list.map((item, val) => {
                                    const { disabled = false } = item
                                    return <Col key={val} span={8}>
                                        <Checkbox disabled={disabled} value={item.value}>{item.label}</Checkbox>
                                    </Col>
                                })}

                            </Row>
                        </Checkbox.Group>
                    </Card></Col>
                <Col span={12}>
                    <div style={{ height: 600, overflowY: 'auto' }}>
                        <TableDataBlock
                            cardProps={{ title: "已选字段" }}
                            tableSort={{
                                key: 'value',
                                onSortEnd: (e) => {
                                    setCheckList(e.map(item => {
                                        return item.value
                                    }))
                                }
                            }}
                            pagination={false}
                            columns={columns}
                            rowKey={(record) => `${record.value}`}
                            list={checkedList.map((val => {
                                let data = {}
                                list.forEach(item => {
                                    if (item.value === val) {
                                        data = {
                                            dataname: item.label,
                                            value: val
                                        }
                                    }
                                })
                                return data
                            }))}
                        ></TableDataBlock>
                    </div>

                </Col>
            </Row>
        </Modal>
    );
};

export default connect(({ loading }) => ({
    loading: loading.effects['user/fakeAdminPageFieldConfig'],
}))(FiledModel);
